<template>
  <div class="helper">
    <span class="left">{{unFinishedTodoLength}} items left</span>
    <span class="tabs">
      <span 
        v-for="state in states" 
        :key="state"
        :class="[filter===state ? 'actived': '' ]"
        class="state1"
        @click="toggleFilter(state)"
        >
        {{state}}
      </span>
    </span>
    <span class="clear" @click="clearAllCompleted">Clear Completed</span>
  </div>
</template>

<script>
  export default {
    props: {
      filter: {
        type: String,
        required: true
      },
      todos:{
          type:Array,
          rerequired: true
      }
    },
    data() {
      return{
        states: ['all', 'active', 'completed']
      }
    },
    computed: {
      unFinishedTodoLength() {
          //返回未完成的个数
        return this.todos.filter(todo=>!todo.completed).length
      }
    },
    methods: {
      toggleFilter(state) {
        this.$emit('toggle', state)
      },
      clearAllCompleted() {
        this.$emit('clearAll')
      }
    }
  }
</script>

<style scoped>
.helper {
  font-weight: 100;
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  line-height: 30px;
  background-color: #ffffff;
  font-size: 14px;
}
.left, .clear, .tabs {
  padding: 0 10px;
  box-sizing: border-box;
}
.left, .clear {
  width: 150px;
}
.left {
  text-align: left;
}
.clear {
  text-align: right;
  cursor: pointer;
}
.tabs {
  width: 200px;
  display: flex;
  justify-content: space-around;

}
.tabs .state1{
    display: inline-block;
    padding: 0 10px;
    cursor: pointer;
}
.actived {
     color: red;
     border: 1px solid red;
     border-radius: 10px;
    }
</style>